<template>
    <div class="mg-tb">
        <!--导航-->
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li@click="getimglist(0)">全部</li>
                    <li v-for="(item,index) in cates" :key="index" @click="getimglist(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!--图片列表-->
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div class="desc">
                            <h4>{{item.title}}</h4>
                            <p>{{item.zhaiyao}}</p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import apiphoto from '../../kits/common.js';
export default {
    data() {
        return {
            ulWidth: 320,
            cates: [],
            list: []

            // http://182.254.146.100:8899/api/getimages/23
        }
    },
    created() {
        var all = 0; //获取所有数据
        this.getcate();
        this.getimglist(all);
    },
    methods: {
        getimglist(cateid) {
            cateid = cateid || 0;
            var url = apiphoto.apiphoto + "/api/getimages/" + cateid;
            this.$http.get(url).then(function (res) {
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }

                this.list = res.body.message;
            })
        },
        getcate() {
            var url = apiphoto.apiphoto + "/api/getimgcategory";
            this.$http.get(url).then(function (res) {
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }

                this.cates = res.body.message;

                // 计算Ul的宽度
                var w = 68;
                var longs = res.body.message.length + 3;
                this.ulWidth = w * longs;
            })
        }
    }
}
</script>

<style scoped>
#cate {
    max-width: 375px;
    overflow-x: auto;
    width: 375px;
}

#cate ul {
    padding: 0px 10px;
}

#cate ul li {
    list-style: none;
    display: inline-block;
    margin: 0px 5px;
}

image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
}

#imglist ul {
    padding: 0;
}

#imglist li {
    list-style: none;
    position: relative;
}

#imglist img {
    width: 100%;
}

#imglist .desc {
    background: rgba(0, 0, 0, .3);
    color: #fff;
    padding: 5px;
    position: absolute;
    bottom: 0;
}

.desc h4 {
    font-size: 16px;
}

.desc p {
    color: #fff;
}
</style>